/* pages/goods_detail/index.wxss */
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("//at.alicdn.com/t/webfont_3fxww58p7n2.eot"); /* IE9*/
  src: url("//at.alicdn.com/t/webfont_3fxww58p7n2.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("//at.alicdn.com/t/webfont_3fxww58p7n2.woff2")
      format("woff2"),
    url("//at.alicdn.com/t/webfont_3fxww58p7n2.woff") format("woff"),
    /* chrome、firefox */ url("//at.alicdn.com/t/webfont_3fxww58p7n2.ttf")
      format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url("//at.alicdn.com/t/webfont_3fxww58p7n2.svg#杨任东竹石体-Bold")
      format("svg"); /* iOS 4.1- */
}
.web-font {
  font-family: "webfont" !important;
  font-size: var(--firstTitle);
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
page {
  padding-bottom: 90rpx;

  .middle_box {
    background-color: var(--backGroundColor);
    .box_one {
      display: flex;
      width: 100vw;
      height: 2.1rem;
      padding: 28rpx 20rpx;
      justify-content: space-between;
      align-items: center;
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      .price {
        flex: 1;
        color: #fff;
        font-size: var(--firstTitle);
        font-weight: 700;
      }
      .right {
        color: #fff;
        letter-spacing: 1rpx;
      }
    }
    .tags_list {
      padding: 28rpx 20rpx;
      background-color: #fff;
      .tags {
        display: inline-block;
        font-size: var(--normalTitle);
        border: 1px solid #4a90e2;
        color: #4a90e2;
        border-radius: 8rpx;
        padding: 0 8rpx;
        margin-right: 8rpx;
        letter-spacing: 1rpx;
      }
    }
    .goods_explain {
      display: flex;
      align-items: center;
      padding: 0 20rpx 18rpx;
      background-color: #fff;
      .goods_name {
        flex: 1;
        padding-right: 20rpx;
        font-size: var(--secondTitle);
        letter-spacing: 2rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .goods_fav {
        flex: 0.18;
        border-left: 1rpx solid var(--borderColor);
        text-align: center;
        padding-left: 20rpx;
        .favicon {
          padding: 0 4rpx 3rpx 0;
          font-size: 40rpx;
        }
        .active_fav {
          color: var(--themeColor);
        }
      }
    }
    .tag_next {
      padding: 0 20rpx;
      background-color: #fff;
      .tag_name {
        padding: 20rpx 0 10rpx 0;
        font-size: var(--thirdTitle);
        font-weight: 700;
      }
      .tag_one,
      .tag_active {
        display: inline-block;
        border: 2rpx solid #e7e7e7;
        border-radius: 8rpx;
        padding: 10rpx 32rpx;
        margin: 20rpx 20rpx 20rpx 0;
        overflow: hidden;
      }
      .tag_active {
        position: relative;
        border: 2rpx solid var(--themeColor);
      }
      .icon-pa_checked:before {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 60rpx;
      }
    }
    .detail {
      padding: 20rpx;
      margin: 20rpx 0;
      font-size: var(--thirdTitle);
      font-weight: 700;
      background: #fff;
    }
  }
  .btm {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: 90rpx;
    background-color: var(--backGroundColor);
    border-top: 1rpx solid var(--borderColor);
    .tools_item {
      flex: 1;
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: var(--levelTwoTitle);
      .iconfont {
        font-size: 36rpx;
        color: var(--levelOneTitle);
        padding-bottom: 6rpx;
      }
      .car_number {
        position: absolute;
        top: 4rpx;
        right: 16rpx;
        border-radius: 50%;
        background-color: var(--themeColor);
        color: #fff;
        font-size: 24rpx;
        width: 35rpx;
        height: 35rpx;
        text-align: center;
      }
      .btn_item {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
      }
    }
    .btn_car,
    .btn_buy {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--thirdTitle);
      color: #fff;
      font-weight: 700;
      background-color: rgb(255, 163, 0);
    }
    .btn_buy {
      background-color: var(--themeColor);
    }
  }
}
